let banner=document.querySelector(".banner"),
    wrap=document.querySelector(".wrap"),
    circles=document.querySelectorAll(".circle span"),
    imgWidth=banner.offsetWidth;//一个图片的宽度
//   初始化
wrap.innerHTML+=wrap.innerHTML;
let len = wrap.children.length;
wrap.style.width=len * 100 + "vw"
// 给一个默认移动值必须放在行间样式
wrap.style.transform='translateX(0px)'
let startPointx=0,//手指按下时的坐标
    startLeft=0,//手指按下时已经走的距离
    movePointX=0,//手指移动的距离
    cn=0,
    ln=0,
    timer=null;
    
//手指按下
banner.addEventListener("touchstart",function(ev){
     clearInterval(timer)
      wrap.style.transition=null;
if(cn==0){
    cn=len / 2;
}
if(cn==len-1){
    cn=len / 2 - 1
}
   wrap.style.transform='translateX(' + -cn*imgWidth +"px)";

    startPointx=ev.changedTouches[0].pageX;
  startLeft= parseFloat(wrap.style.transform.split("(")[1]) 

})
// 手指移动
banner.addEventListener("touchmove",function(ev){
    movePointX=ev.changedTouches[0].pageX -  startPointx
    wrap.style.transform='translateX(' + (movePointX + startLeft) +"px)";
    
})
// 手指抬起
banner.addEventListener("touchend",function(ev){
      movePointX=ev.changedTouches[0].pageX -  startPointx
      console.log(movePointX)
    // 回弹的范围
    let backWidth=imgWidth / 8
    if(Math.abs(movePointX) >  backWidth){
      cn-=movePointX / Math.abs(movePointX);

    }
    wrap.style.transition=".3s";
     wrap.style.transform='translateX(' + -cn * imgWidth +"px)";
    //  小方块
    let hn=cn % (len / 2);
    circles[ln].className="";
    circles[cn].className="active";
    ln=hn;
    timer=setInterval(move,3000)

})
function move(){
    cn++;
   wrap.style.transition=".3s";
     wrap.style.transform='translateX(' + -cn * imgWidth +"px)";
     wrap.addEventListener("transitionend",function(){
       if(cn >= len - 1){
        cn = len / 2 - 1
       }
     wrap.style.transition=null;
     wrap.style.transform='translateX(' + -cn * imgWidth +"px)";


     })
    //  小方块
    let hn=cn % (len / 2)
    circles[ln].className="";
    circles[cn].className="active"
    ln=hn

}
timer = setInterval(move,3000)